<template>
  <div class="login-container">
    <a-form
        :model="formState"
        class="login-form"
        @finish="handleSubmit"
    >
      <h2 style="text-align: center; margin-bottom: 24px">Hokbun后台管理系统</h2>

      <a-form-item
          name="account"
          :rules="[{ required: false, message: '请输入账号!' }]"
      >
        <a-input
            v-model:value="formState.account"
            placeholder="账号"
            size="large"
        >
          <template #prefix>
            <UserOutlined/>
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
          name="password"
          :rules="[
            { required: true, message: '请输入密码!' },
            {min:8, message: '密码长度不能小于8位'},
        ]"
      >
        <a-input-password
            v-model:value="formState.password"
            placeholder="密码"
            size="large"
        >
          <template #prefix>
            <LockOutlined/>
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <a-button
            type="primary"
            html-type="submit"
            block
            size="large"
        >
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import {reactive} from 'vue';
import {LockOutlined, UserOutlined} from '@ant-design/icons-vue';
import {userLogin} from "../../apis/user.js";
import {useLoginUserStore} from "../../store/user.js";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";

const router = useRouter();
const loginUserStore = useLoginUserStore();

const formState = reactive({
  account: '',
  password: '',
});

const handleSubmit = async () => {
  const res = await userLogin(formState);
  if (res.data.code === 1 && res.data.data) {
    await loginUserStore.fetchLoginUser();
    await router.push({
      path: '/index',
      replace: true,
    });
  } else {
    message.error("登录失败");
  }
};

</script>

<style scoped>
.login-container {
  height: 100vh;
  background: url('../../assets/Hokbun.png') no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>